<!DOCTYPE html>
<html>

<head>
    <title>leaflet.wms Examples</title>
    <link href="../resources/js/leaflet/leaflet.css" rel="stylesheet" />
    <script src="../resources/js/jquery.min.js"></script>
    <script src="../resources/js/leaflet/leaflet-src.js"></script>
    <script src="../src/leaflet-TileLayer-Clip.js"></script>
    <style>
        body,
        html,
        #map {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        #map {
            background-image: url(../resources/images/bjt.jpg);
        }
    </style>
</head>

<body>

    <div>
        背景图片:<input type="checkbox" id="chkBJ" checked="true">
        显示模式:<select id="ddlMode">
            <option value="show">show</option>
            <option value="clip">clip</option>
        </select>
    </div>
    <div id="map">

    </div>
    <script>
        window.onload = function () {
            var map = L.map('map', { crs: L.CRS.EPSG4326 }).setView([30.46337852800008, 120.967045726], 6);
            //var map = L.map('map').setView([30.46337852800008, 120.967045726], 7);
            var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
                osmAttribution = 'Map data &copy; 2012 OpenStreetMap contributors';

            var geojson;
            var layer;
            $.ajax({
                url: "../resources/json/ZJ_quxian_RH.json",
                success: function (data) {
                    //添加GeoJSON数据，在地图中显示
                    geojson = L.geoJSON(data);

                    //天地图影像底图
                    layer = L.TileLayer.clip('http://t4.tianditu.gov.cn/vec_c/wmts?tk=6dfd31e3b55a8466f34997aee5551a9c&layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
                        polygons: [geojson.getLayers()[0]],
                        name: "中国天地图影像",
                        maxZoom: 20,
                        tileSize: 256,
                        zoomOffset: 1,
                        mode: "show"
                    }).addTo(map);


                    // layer = L.TileLayer.clip(osmUrl, {
                    //     //boundary: data,
                    //     polygons:geojson.getLayers(),
                    //     attribution: osmAttribution,
                    //     trackAttribution: true,
                    //     mode: "clip"
                    // }).addTo(map);
                }
            });

            //修改显示模式
            var select = document.getElementById("ddlMode");
            select.onchange = function (event) {
                layer.setMode(event.target.value);
            };

            $("#chkBJ").bind("change", function (event) {
                if (event.target.checked) {
                    $("#map").css({ "background-image": "url(../resources/images/bjt.jpg)" });
                } else {
                    $("#map").css({ "background-image": "url()" });
                }
            });
        }


    </script>
</body>

</html>